<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>列表渲染</title>
        <script type="text/javascript" src="js/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <!--遍历数组-->
            <ul>
                <li v-for="(p,index) in persons" :key="index">
                    <!--遍历对象-->
                    <ul>
                        <li v-for="(val,key) in p" :key="key">{{key}} : {{val}}</li>
                    </ul>
                </li>
            </ul>

            <!--遍历字符串-->
            <ul>
                <li v-for="(char,index) in str" :key="index">{{char}} - {{index}}</li>
            </ul>

        </div>

        <script type="text/javascript">
            new Vue({
                el: '#app',
                data: {
                    persons: [
                        {id: '001', name: '张三', age: 18},
                        {id: '002', name: '李四', age: 18},
                        {id: '003', name: '王五', age: 18}
                    ],
                    str: "hello"
                }
            })
        </script>

    </body>
</html>